<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="path" value="${pageContext.request.contextPath}"/>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主页 | 汉诺塔</title>
    <link rel="stylesheet" type="text/css" href="${path}/css/normalizehanuota.css" />
    <link rel="stylesheet" type="text/css" href="${path}/css/defaulthannuota.css">
    <link rel="stylesheet" href="${path}/css/sweet-alerthannuota.css">
    <jsp:include page="./include/commonfiles.jsp"/>
    <style type="text/css">
        table {font:bold 13px Verdana}
        p {font:normal 11px Tahoma,Verdana}
        input,select {font:normal 12px Tahoma,Verdana}
        select {width:40px}
        a {font-weight:bold}
        .tower {position:absolute;visibility:visible;left:77px;top:184px;font:bold 10px Tahoma}
        .container {position:absolute;visibility:visible;}
        .towervert {position:absolute;visibility:visible;border:1px solid black;background-color:black}
        .towerhoriz {position:absolute;visibility:visible;border:1px solid black;font-size:1px;background-color:black;}
        .disk {position:absolute;visibility:visible;border:1px solid black;}
    </style>
    <script type="text/javascript" src="${path}/js/sweet-alert.min.js"></script>
    <script type="text/javascript" src="${path}/js/hanoi.js"></script>
</head>
<body onload="init();" onselectstart="return false" oncontextmenu="return false">
<jsp:include page="./include/silderbar.jsp"/>
<div class="htmleaf-container">
    <header class="htmleaf-header">
        <h1>纯javascript实现汉诺塔可视化小游戏 <span>Tower of Hanoi</span></h1>
<%--        <div class="htmleaf-links">--%>
<%--            <a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.htmleaf.com/" title="jQuery之家" target="_blank"><span> jQuery之家</span></a>--%>
<%--            <a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.htmleaf.com/html5/html5youxi/201508272484.html" title="返回下载页" target="_blank"><span> 返回下载页</span></a>--%>
<%--        </div>--%>
    </header>
    <div class="htmleaf-content">
        <form name="hanoi">
            <div id="title" style="position:absolute;visibility:visible;left:-250px;top:-250px;width:160px;height:20px;font:bold 20px Tahoma;text-align:center;">Tower of Hanoi</div>

            <div id="tower1" class="container" style="left:-250px;top:-250px;width:200px;height:200px" onmousemove="indexTo=1">
                <div id="verttower1" class="towervert" style="left:99px;top:10px;width:3px;height:170px"></div>
                <div id="horiztower1" class="towerhoriz" style="left:0px;top:180px;width:200px;height:2px"></div>
                <div class="tower">TOWER 1</div>
            </div>

            <div id="tower2" class="container" style="left:-250px;top:-250px;width:200px;height:200px" onmousemove="indexTo=2">
                <div id="verttower2" class="towervert" style="left:99px;top:10px;width:3px;height:170px"></div>
                <div id="horiztower2" class="towerhoriz" style="left:0px;top:180px;width:200px;height:2px"></div>
                <div class="tower">TOWER 2</div>
            </div>

            <div id="tower3" class="container" style="left:-250px;top:-250px;width:200px;height:200px" onmousemove="indexTo=3">
                <div id="verttower3" class="towervert" style="left:99px;top:10px;width:3px;height:170px"></div>
                <div id="horiztower3" class="towerhoriz" style="left:0px;top:180px;width:200px;height:2px"></div>
                <div class="tower">TOWER 3</div>
            </div>

            <div id="disk1" class="disk" style="left:-250px;top:-250px;width:50px;height:19px;background-color:pink" onmousedown="initializeDrag(this,event)" onmouseup="dropDisk(this)" title="Disk 1"></div>
            <div id="disk2" class="disk" style="left:-250px;top:-250px;width:70px;height:19px;background-color:violet" onmousedown="initializeDrag(this,event)" onmouseup="dropDisk(this)" title="Disk 2"></div>
            <div id="disk3" class="disk" style="left:-250px;top:-250px;width:90px;height:19px;background-color:indigo" onmousedown="initializeDrag(this,event)" onmouseup="dropDisk(this)" title="Disk 3"></div>
            <div id="disk4" class="disk" style="left:-250px;top:-250px;width:110px;height:19px;background-color:blue" onmousedown="initializeDrag(this,event)" onmouseup="dropDisk(this)" title="Disk 4"></div>
            <div id="disk5" class="disk" style="left:-250px;top:-250px;width:130px;height:19px;background-color:green" onmousedown="initializeDrag(this,event)" onmouseup="dropDisk(this)" title="Disk 5"></div>
            <div id="disk6" class="disk" style="left:-250px;top:-250px;width:150px;height:19px;background-color:yellow" onmousedown="initializeDrag(this,event)" onmouseup="dropDisk(this)" title="Disk 6"></div>
            <div id="disk7" class="disk" style="left:-250px;top:-250px;width:170px;height:19px;background-color:orange" onmousedown="initializeDrag(this,event)" onmouseup="dropDisk(this)" title="Disk 7"></div>
            <div id="disk8" class="disk" style="left:-250px;top:-250px;width:190px;height:19px;background-color:red" onmousedown="initializeDrag(this,event)" onmouseup="dropDisk(this)" title="Disk 8"></div>

            <div id="settings" class="container" style="left:-250px;top:-250px;width:260px;">
                <table>
                    <tr><td>No. of disks</td>
                        <td>
                            <select name="diskno" onchange="newGame(this)" onclick="prevIndex=this.options.selectedIndex">
                                <option value="7" selected>3</option>
                                <option value="15">4</option>
                                <option value="31">5</option>
                                <option value="63">6</option>
                                <option value="127">7</option>
                                <option value="255">8</option>
                            </select>
                        </td></tr>
                    <tr><td>Minimum no. of moves&nbsp;&nbsp;</td>
                        <td><input name="minmove" style="border:none" size="3" value="255" readonly="readonly" /></td></tr>
                    <tr><td>Your no. of moves</td>
                        <td><input name="yourmove" style="border:none" size="3" value="0" readonly="readonly" /></td></tr>
                    <tr><td colspan="2" align="center">
                        <input type="button" name="btnIns" value="游戏规则" onclick="displayIns()" />
                        <input type="button" name="btnRes" value="重新开始" onclick="newGame(document.hanoi.diskno)" />
                        <input type="button" name="btnUndo" value="Undo" onclick="unDo(this)" disabled="disabled" />
                        <input type="button" name="btnSolve" value="Solve" onclick="solve(this)" />
                    </td></tr>
                </table>
                <p>&nbsp;</p>
            </div>
        </form>
    </div>
</div>

</body>
</html>